<template>
  <div>
    <!-- 手动选择年/月 -->
    <el-row :gutter="10">
      <el-col :offset="16" :span="4">
        <el-select v-model="year" size="mini" @change="updateValue">
          <el-option v-for="item in selectYear" :key="item" :value="item" :label="item" />
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select v-model="month" size="mini" @change="updateValue">
          <el-option v-for="item in 12" :key="item" :value="item" :label="item" />
        </el-select>
      </el-col>
    </el-row>

    <el-calendar v-model="currentValue">
      <template v-slot:dateCell="{ date }">
        <div class="cell-content">
          <span>{{ date.getDate() }}</span>
          <span v-if="date.getDay() === 6 || date.getDay() === 0">休</span>
        </div>
        <!-- {{ data }} -->
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  name: 'WorkDate',
  data() {
    return {
      year: '',
      month: '',
      selectYear: [],
      // 日历的默认时间
      currentValue: new Date()
    }
  },

  created() {
    const date = new Date()
    this.year = date.getFullYear()
    this.month = date.getMonth() + 1
    this.selectYear = Array(11).fill(this.year).map((item, index) => (item - 5 + index))
  },

  methods: {
    // 监视年和月 发生变化的事件
    updateValue() {
      this.currentValue = new Date(this.year + '-' + this.month)
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-calendar__header {
  display: none;
}

.cell-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  span:nth-child(2) {
    color: red;
    background: yellow;
    border-radius: 100%;
    padding: 5px;
    margin: 0 5px;
  }
}

::v-deep .el-calendar-table tr td {
  border: none;
}
</style>
